<template>
    <div class="photoInfo-container">
        <h3>{{this.photoInfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间：{{this.photoInfo.add_time}}</span>
            <span>点击：{{this.photoInfo.click}}次</span>
        </p>
        <hr>

        <!--图片缩略区域-->
        <div class="thumb">
            <img class="preview-img" v-for="(item, index) in list"
                 :src="item.src" height="100"
                 @click="$preview.open(index, list)" :key="item.index">
        </div>


        <div class="content" v-html="this.photoInfo.content">

        </div>
        <!--评论子组件-->
        <comment-box :id="id"></comment-box>
    </div>
</template>
<script>

   //导入评论子组件
   import comment from '../subcomponents/comment.vue';

    export default{
        data(){
            return {
                id:this.$route.params.id,//将url地址中传递过来的 id值，挂载到data上，方便以后调用
                photoInfo:{},
                list:[]
            }
        },
        created(){
            this.getPhotoInfo();
            this.getList()
        },
        mounted(){

        },
        methods: {
            getPhotoInfo(){
                this.$http.get('src/mock/photoInfo.json').then(result=>{
                    if (result.status === 200){
                        this.photoInfo = result.body[this.id-1];
                    }
                })
            },
            getList(){
                this.$http.get('src/mock/thumb.json').then(result=>{
                    if (result.status === 200){
                        result.body.forEach(itme=>{
                            itme.w = 225;
                            itme.h = 302;
                            itme.msrc = this.src;
                        });
                        this.list = result.body;

                    }
                })
            }
        },
        computed: {},
        components: {  //注册子组件节点
            "comment-box":comment}
    }
</script>
<style lang="scss" scoped>
.photoInfo-container{
    padding: 5px;
    h3{
        color: #26a2ff;
        font-size: 18px;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle{
        font-size: 12px;
        display: flex;
        justify-content: space-between;
    }
    .content{
        font-size: 14px;
        line-height: 30px;
    }
    .thumb{
        text-align: center;
        img{
            margin: 10px;
            box-shadow: 0 0 8px #999;
        }
    }
}

</style>